<template>
  <div class="PetDetails">
    <div class="banner">
      <img src="@/assets/images/product/bg2.jpg" alt="" />
    </div>
    <div class="container">
      <div class="left">
        <div class="pet">
          <h3>{{ PetDetail.cultivar }}</h3>
          <div class="scription">
            <p>
              {{ PetDetail.ancient }}
            </p>
            <p>
              {{ PetDetail.scriotuon }}
            </p>
          </div>
        </div>
        <div class="cover">
          <img
            src="http://v.bootstrapmb.com/2021/11/plb8511555/img/images/breeder_details.jpg"
            alt=""
          />
        </div>
        <div class="about">
          <h3>关于它</h3>
          <p>
            国内的狗doiated
            dendant的狼。狗t是源自一个古老的,灭绝的狼,和现代灰太狼是狗的nesdarest生活相对。狗是第一种被双面厚绒布,猎人它并不会有攻击行为。
          </p>
        </div>
        <div class="information">
          <h3>宠物信息</h3>
          <div class="content">
            <div class="item">
              <span>名字 :</span>
              <span>{{ PetDetail.name }}</span>
            </div>
            <div class="item">
              <span>性别 :</span>
              <span>{{ PetDetail.gender == "male" ? "雄性" : "雌性" }}</span>
            </div>
            <div class="item">
              <span>年龄 :</span>
              <span>{{ PetDetail.age }}岁</span>
            </div>
            <div class="item">
              <span>Pet ID :</span>
              <span>{{ PetDetail.id }}</span>
            </div>
            <div class="item">
              <span>大小 :</span>
              <span>{{ PetDetail.size }}</span>
            </div>
            <div class="item">
              <span>颜色 :</span>
              <span>{{ PetDetail.color }}</span>
            </div>
            <div class="item">
              <span>城市 :</span>
              <span>{{ PetDetail.city }}</span>
            </div>
            <div class="item">
              <span>价格 :</span>
              <span>{{
                PetDetail.price == 0
                  ? "免费"
                  : Number(PetDetail.price).toFixed(2)
              }}</span>
            </div>
          </div>
        </div>
        <div class="buy" @click="$router.push(`/pet/${PetDetail.id}/adopt`)">
          <span>立即领养</span>
          <img src="@/assets/images/pet/zhua.png" alt="" />
          <div></div>
        </div>
      </div>
      <div class="right">
        <div class="find">
          <h3>寻找您喜欢的宠物</h3>
          <div class="sreach">
            <input type="text" placeholder="搜索宠物品种" />
            <i class="iconfont icon-sousuo1"></i>
          </div>
          <div class="address">
            <i class="iconfont icon-weizhi-tianchong"></i>
            <input type="text" placeholder="搜索城市" />
          </div>
          <div class="color_birth">
            <div class="color">
              <i class="iconfont icon-yanse"></i>
              <input type="text" placeholder="白色" />
            </div>
            <div class="birth">
              <i class="iconfont icon-rili"></i>
              <input type="text" placeholder="2022" />
            </div>
          </div>
          <div class="san sex">
            <i class="iconfont icon-xingbie"></i>
            <span>雄性</span>
            <i class="iconfont icon-jiantouxia"></i>
          </div>
          <div class="san price">
            <i class="iconfont icon-renminbi"></i>
            <span>雄性</span>
            <i class="iconfont icon-jiantouxia"></i>
          </div>
          <div class="san sanage">
            <i class="iconfont icon-naiping"></i>
            <span>年龄</span>
            <i class="iconfont icon-jiantouxia"></i>
          </div>
          <div class="submit">
            <span>寻找属于您宠物</span>
            <div></div>
          </div>
        </div>
        <div class="email">
          <img src="@/assets/images/pet/sn_icon.png" alt="" />
          <div class="title">订阅宠物最新的消息</div>
          <p>订阅后最新消息</p>
          <input type="text" placeholder="请输入您的邮箱" />
          <div class="buttom">
            <span>订 阅</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAxiosPetDetailt } from "@/api";
export default {
  name: "PetDetails",
  data() {
    return {
      PetDetail: {},
    };
  },
  mounted() {
    this.getPetDetail();
  },
  methods: {
    async getPetDetail() {
      let id = this.$route.params.id;
      let res = await getAxiosPetDetailt(id);
      this.PetDetail = res.result;
      console.log(res.result);
    },
  },
};
</script>

<style lang="less" scoped>
.PetDetails {
  background: url("~@/assets/images/pet/breeder_details_bg.jpg");
  background-size: cover;
  background-position: center;
  .banner {
    img {
      width: 100%;
    }
  }
  .container {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    padding-top: 100px;
    padding-bottom: 60px;
    .left {
      flex: 1;
      margin-right: 40px;
      border-radius: 10px;
      background-color: #fff;
      padding: 40px;
      box-sizing: border-box;
      .pet {
        h3 {
          color: #444;
          font-size: 22px;
          letter-spacing: 2px;
        }
        p {
          padding-top: 20px;
          font-size: 16px;
          line-height: 30px;
          color: #676666;
          // font-weight: bold;
        }
      }
      .cover {
        padding: 30px 0;
        img {
          width: 100%;
        }
      }
      .about {
        h3 {
          color: #444;
          font-size: 22px;
          letter-spacing: 2px;
          padding-bottom: 20px;
        }
        p {
          font-size: 16px;
          color: #676666;
          line-height: 28px;
        }
      }
      .information {
        padding-top: 40px;
        h3 {
          color: #444;
          font-size: 22px;
          letter-spacing: 2px;
          padding-bottom: 14px;
          border-bottom: 1px solid #ccc;
        }
        .content {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          padding-top: 20px;
          .item {
            display: flex;
            flex-direction: column;
            flex-basis: 25%;
            span {
              &:first-child {
                font-size: 18px;
                font-weight: bold;
                color: #555;
              }
              &:last-child {
                padding-top: 10px;
                padding-bottom: 24px;
                font-size: 15px;
                color: #f04336;
                font-weight: bold;
              }
            }
          }
        }
      }
      .buy {
        margin-top: 20px;
        margin-bottom: 20px;
        cursor: pointer;
        display: inline-block;
        padding: 18px 32px;
        padding-right: 20px;
        border-radius: 4px;
        background-color: #f04336;
        position: relative;
        overflow: hidden;
        span {
          font-size: 20px;
          color: #fff;
          position: relative;
          z-index: 1;
        }
        img {
          height: 20px;
          padding-left: 10px;
          transform: rotate(30deg);
          position: relative;
          z-index: 1;
        }
        &:hover > div {
          top: -20px;
        }
        > div {
          height: 100px;
          width: 220px;
          background-color: #000;
          position: absolute;
          left: -20px;
          top: 60px;
          border-radius: 50%;
          transition: all 0.4s;
        }
      }
    }
    .right {
      flex-basis: 30%;
      .find {
        padding: 20px 30px 40px 30px;
        box-sizing: border-box;
        background-color: #fff;
        border-radius: 10px;
        > h3 {
          font-size: 22px;
          color: #444;
          padding: 20px 0;
        }
        .sreach {
          height: 50px;
          border-radius: 6px;
          border: 1px solid #e1e1e1;
          display: flex;
          input {
            flex: 1;
            outline: none;
            border: none;
            padding-left: 20px;
            border-radius: 6px;
            color: #818080;
            caret-color: #818080;
            font-size: 14px;
            &::-webkit-input-placeholder {
              color: #bbb;
            }
          }
          i {
            line-height: 50px;
            padding: 0 18px;
            font-size: 20px;
            color: #fff;
            background-color: #f04336;
            border-radius: 6px;
            cursor: pointer;
          }
        }
        .address {
          margin-top: 20px;
          height: 50px;
          border-radius: 6px;
          border: 1px solid #e1e1e1;
          display: flex;
          input {
            flex: 1;
            outline: none;
            border: none;
            // padding-left: 20px;
            border-radius: 6px;
            color: #818080;
            caret-color: #818080;
            font-size: 14px;
            &::-webkit-input-placeholder {
              color: #bbb;
            }
          }
          i {
            line-height: 50px;
            padding: 0 14px;
            font-size: 16px;
            margin-top: 2px;
            color: #555;
            // color: #fff;
            // background-color: #f04336;
            border-radius: 6px;
          }
        }
        .color_birth {
          display: flex;
          justify-content: space-between;
          .color {
            flex-basis: 47%;
            margin-top: 20px;
            height: 50px;
            border-radius: 6px;
            border: 1px solid #e1e1e1;
            display: flex;
            input {
              width: 100%;
              flex: 1;
              outline: none;
              border: none;
              // padding-left: 20px;
              border-radius: 6px;
              color: #818080;
              caret-color: #818080;
              font-size: 14px;
              &::-webkit-input-placeholder {
                color: #bbb;
              }
            }
            i {
              line-height: 50px;
              padding: 0 14px;
              font-size: 16px;
              margin-top: 1px;
              // color: #fff;
              // background-color: #f04336;
              border-radius: 6px;
              color: #555;
            }
          }
          .birth {
            flex-basis: 46%;
            margin-top: 20px;
            height: 50px;
            border-radius: 6px;
            border: 1px solid #e1e1e1;
            display: flex;
            input {
              width: 100%;
              flex: 1;
              outline: none;
              border: none;
              // padding-left: 20px;
              border-radius: 6px;
              color: #818080;
              caret-color: #818080;
              font-size: 14px;
              &::-webkit-input-placeholder {
                color: #bbb;
              }
            }
            i {
              line-height: 50px;
              padding: 0 14px;
              font-size: 16px;
              margin-top: 1px;
              border-radius: 6px;
              color: #555;
            }
          }
        }
        .san {
          display: flex;
          height: 50px;
          border: 1px solid #e1e1e1;
          margin-top: 20px;
          align-items: center;
          // padding: 14px;
          box-sizing: border-box;
          border-radius: 6px;
          i {
            font-size: 14px;
            padding: 14px;
            color: #555;
          }
          span {
            font-size: 14px;
            flex: 1;
            color: #bbb;
            // letter-spacing: 1px;
            // font-weight: bold;
          }
        }
        .submit {
          cursor: pointer;
          margin-top: 20px;
          color: #fff;
          background-color: #f04336;
          border-radius: 6px;
          text-align: center;
          line-height: 20px;
          font-size: 20px;
          padding: 20px 0;
          position: relative;
          overflow: hidden;
          &:hover div {
            top: -30px;
          }
          span {
            position: relative;
            z-index: 9;
          }
          > div {
            position: absolute;
            height: 120px;
            width: 160%;
            background-color: #000;
            left: -30%;
            top: 70px;
            transition: all 0.6s;
            border-radius: 50%;
          }
        }
      }
      .email {
        width: 100%;
        background-color: #143556;
        padding: 12%;
        padding-bottom: 14%;
        box-sizing: border-box;
        border-radius: 10px;
        margin-top: 40px;
        img {
          width: 80%;
          margin: 0 auto;
          display: block;
        }
        .title {
          padding: 30px 0 14px 0;
          font-size: 22px;
          color: #fff;
          text-align: center;
          letter-spacing: 2px;
        }
        p {
          text-align: center;
          color: #fff;
          font-size: 14px;
          letter-spacing: 1px;
        }
        input {
          height: 50px;
          width: 100%;
          border-radius: 6px;
          overflow: hidden;
          box-sizing: border-box;
          margin: 30px 0 14px 0;
          outline: none;
          text-align: center;
          color: #818080;
          caret-color: #818080;
          font-size: 14px;
          border: none;
          &::-webkit-input-placeholder {
            color: #bbb;
          }
        }
        .buttom {
          width: 100%;
          height: 50px;
          background-color: #f04336;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border-radius: 10px;
          span {
            color: #fff;
            font-size: 20px;
            // letter-spacing: 24px;
          }
        }
      }
    }
  }
}
</style>